<template>
	<view>
		<view class="after-sales-detail">
			<view class="after-sales-header">
				<view class="after-sales-status white lg">
					{{goodsService.service_status_text}}
				</view>
			</view>
			<view class="goods-container bg-white m-t-20">
				<view class="goods-item flex">
					<view class="goods-img">
						<u-image  @tap="previewImage(goodsService.mygoods.image)"   width="180rpx" height="180rpx" border-radius="10rpx"
							:src="goodsService.mygoods.image"></u-image>
					</view>
					<view class="goods-info flex-1 m-l-24">
						<view class="line-2">
							<router-link v-if="goodsService.mygoods" :to="{path:'/pages/goods_details/goods_details',query:{id:goodsService.mygoods.goods_id}}">
								{{goodsService.mygoods.goods_name}}
							</router-link>
						</view>
						<view class="m-t-10 xxs line-1 muted">{{goodsService.mygoods.bar_code}}</view>
						<view class="m-t-10 xxs line-1 muted">{{goodsService.mygoods.spec_value}}</view>
					</view>
				</view>
			</view>
			<view class="return-address-contain flex bg-white m-t-20">
				<view class="label address-title">邮寄地址：</view>
				<view class="label_content sm address flex-1 m-r-20 flex-col" style="width: 50rpx;">
					<text style="width: 420rpx;">{{refund_address.address}}</text> 
					<text style="width: 420rpx;">{{refund_address.contact}}，{{refund_address.mobile}}</text>
				</view>
				<view style="width: 120rpx;" class="xxs flex-none row-center">
					<button class="sm br60  flex-2" type="primary"
							@tap="onCopy(refund_address.address + ',' + refund_address.contact + ',' + refund_address.mobile)">复制</button>
				</view>
			</view>
			<view class="return-address-contain flex bg-white m-t-20" v-if="goodsService.service_type == 1">
				<view class="label address-title">我的地址：</view>
				<view class="label_content sm address flex-1 m-r-20 flex-col">
						<text style="width: 420rpx;">{{goodsService.user_address_info.address_all}} </text>
						<text style="width: 420rpx;">{{goodsService.user_address_info.contact}}, {{goodsService.user_address_info.telephone}}
						</text>
					</view>
			</view>
			<view class="return-address-contain flex bg-white m-t-20"  v-if="goodsService.service_type == 2">
				<view class="label address-title m-b-10">收款信息：</view>
				<view class="label_content" style="line-height: 50rpx;">
					<view class="line-2">收款账号： {{goodsService.user_pay_info.account}}</view>
					<view class="line-2">收款姓名： {{goodsService.user_pay_info.real_name}}</view>
					<view class="line-2 flex" v-if="goodsService.user_pay_info.money_qr_code">
						<view style="padding-bottom: 10rpx; display: flex; justify-content: flex-start; align-items: flex-start;">收款码: 
						<image style="width: 60rpx; height: 60rpx;  margin-left: 10rpx;" :mode="aspectFit" :src="goodsService.user_pay_info.money_qr_code"></image></view>
					 </view>
				</view>
			</view>
			
			<view class="return-address-contain flex bg-white m-t-20"  v-if="goodsService.invoice_no">
				<view class="my_send flex">
					<view class="label address-title m-b-10">我的发货：</view>
					<view class="label_content my_send_list" style="line-height: 46rpx;">
						<view class="line-2">快递公司名称： 
								<view class="text_val">{{goodsService.express_name}}</view>
						</view>
						<view class="line-2">快递单号： 
							<router-link :to="{path:'/bundle/pages/express_logistics/express_logistics',query:{express_id:goodsService.express_id,express_name:goodsService.express_name, invoice_no:goodsService.invoice_no}}">
								{{goodsService.invoice_no}} 详情
							</router-link>
						</view>
						<view class="line-2" v-if="goodsService.express_remark">快递备注： 
							<view class="text_val">
								{{goodsService.express_remark}}
							</view>
						</view>
						<view class="line-2 flex" v-if="goodsService.express_image">
							<view style="padding-bottom: 10rpx;">快递图片：</view>
							<image @tap="previewImage(goodsService.express_image)" style="width: 100rpx; height: 100rpx;" :mode="aspectFit" :src="goodsService.express_image"></image>
						 </view>
					</view>
				</view>
			</view>
			<view class="return-address-contain flex bg-white m-t-20"  v-if="goodsService.admin_invoice_no">
				<view class="my_send flex">
					<view class="label address-title m-b-10">平台发货：</view>
					<view class="label_content my_send_list" style="line-height: 46rpx;">
						<view class="line-2">快递公司名称： 
								<view class="text_val">{{goodsService.admin_express_name}}</view>
						</view>
						<view class="line-2">快递单号： 
							<router-link :to="{path:'/bundle/pages/express_logistics/express_logistics',query:{express_id:goodsService.admin_express_id,express_name:goodsService.admin_express_name, invoice_no:goodsService.admin_invoice_no}}">
								{{goodsService.admin_invoice_no}} 详情
							</router-link>
						</view>
					</view>
				</view>
			</view>
			<view class="return-address-contain flex bg-white m-t-20" style="align-items: flex-start; justify-content: flex-start;">
				<view class="label address-title">日志记录：</view>
				<view style="margin-top: 0rpx;">
					<view class="return-goods-item flex sm">
						<view class="return-title">服务类型：</view>
						<view class="return-explain">{{goodsService.service_type_text}}</view>
					</view>
					<view class="return-goods-item flex sm" v-if="goodsService.remark">
						<view class="return-title">客户备注：</view>
						<view class="return-explain">{{goodsService.remark}}</view>
					</view>
					<view class="return-goods-item flex sm" v-if="goodsService.images">
						<view class="return-title">客户图片：</view>
						<view style="return-explain"><image @tap="previewImage(goodsService.images)" style="width: 60rpx; height: 60rpx;" :mode="aspectFit" :src="goodsService.images"></image></view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.service_price && goodsService.service_type == 2">
						<view class="return-title">回收金额：</view>
						<view class="return-explain primary">¥{{goodsService.service_price}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20">
						<view class="return-title">服务单号：</view>
						<view class="return-explain">{{goodsService.service_sn}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20">
						<view class="return-title">申请时间：</view>
						<view class="return-explain">{{goodsService.create_time}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.audit_time">
						<view class="return-title">审核时间：</view>
						<view class="return-explain">{{goodsService.audit_time}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.admin_receive_time">
						<view class="return-title">平台收货时间：</view>
						<view class="return-explain">{{goodsService.admin_receive_time}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.admin_send_time">
						<view class="return-title">平台寄出时间：</view>
						<view class="return-explain">{{goodsService.admin_send_time}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.pay_time">
						<view class="return-title">平台打款时间：</view>
						<view class="return-explain">{{goodsService.pay_time}}</view>
					</view>
					<view class="return-goods-item flex sm m-t-20" v-if="goodsService.finish_time">
						<view class="return-title">完成时间：</view>
						<view class="return-explain">{{goodsService.finish_time}}</view>
					</view>
				</view>
			</view>
			
			
			<view class="btn-group fixed bg-white flex row-right" v-if="goodsService.service_status != 90">
				<!-- <view class="m-r-20 btn br60" @tap="confirmDialog=true">撤销申请</view>
				<router-link :to="{path: '/bundle/pages/apply_refund/apply_refund', query: {after_sale_id: goodsService.id, 
								order_id: goodsService.order_goods.order_id,
								item_id: goodsService.order_goods.item_id}}">
					<view class="m-r-20 btn br60 primary" v-if="(goodsService.status == 4 || goodsService.status == 1)">重新申请
					</view>
				</router-link> -->
				<router-link
					:to="{path: '/bundle/pages/input_express_info/input_express_info', query: {id: goodsService.id, order_type: 'goods_service'}}">
					<view class="m-r-20 btn br60" v-if="goodsService.service_status == 10">
						填写快递单号
					</view>
				</router-link>
			</view>
		</view>
		<u-modal v-model="confirmDialog" confirm-text="确定" :showCancelButton="true" :confirm-color="colorConfig.primary"
			@confirm="cancelApplyFun">
			<view class="flex-col col-center tips-dialog" style="padding: 30rpx 0;">
				<image class="icon-lg" :src="imgUrl + '/static/images/icon_warning.png'"></image>
				<view class="m-t-30">是否要撤销申请？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		goodsServiceDetail,
		cancelApply
	} from "@/api/user";
	import {
		trottle,
		copy
	} from "@/utils/tools.js";

	export default {
		data() {
			return {
				goodsDetail:{},
				goodsService: {
					shop: {},
					order_goods: {}
				},
				refund_address: {
					type: Object,
					defaults: {}
				},
				shopInfo: {
					type: Object,
					defaults: {}
				},
				confirmDialog: false,
				imgUrl:`${this.$imgUrl}/wechat`
			};
		},
		onLoad(options) {

		},

		onShow() {
			this.id = this.$Route.query.id
			this.goodsServiceDetailFun();
		},

		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			previewImage(current) {
				uni.previewImage({
				    current,
				    urls: [current] // 需要预览的图片http链接列表
				});
			},
			onCopy(str) {
				copy(str)
			},
			cancelApplyFun() {
				cancelApply({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						
						uni.$emit("refreshsale")
						this.$toast({
							title: res.msg
						}, {
							tab: 3,
							url: 1
						});
					}
				});
			},
		
			goodsServiceDetailFun() {
				goodsServiceDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.goodsService = res.data
						this.refund_address = this.goodsService.shop;
						console.log('==========this.goodsService===================');
						console.log(this.goodsService);
					}
				});
			}

		}
	};
</script>
<style lang="scss">
	.label{
		width: 160rpx;
	}
	.label_content{
		line-height: 50rpx;
		width: 600rpx;
	}
	.my_send_list{
		.line-2{
			margin-bottom: 10rpx;
			width: 480rpx;
			display: flex;
			flex-direction: row;
		}
	}
	.after-sales-detail {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.after-sales-header {
			.after-sales-status {
				padding: 48rpx 30rpx;
				background-color: #00632B;
			}

			.after-sales-explain {
				padding: 20rpx 30rpx 24rpx;
			}
		}

		.return-goods-container {
			padding: 20rpx 24rpx 55rpx;
			
			.return-goods-item {
				line-height: 40rpx;
			}
		}

		.btn-group {
			padding: 0rpx 24rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
			.btn {
				padding: 10rpx 34rpx;
				border: 1px solid #999999;

				&.primary {
					border-color: $-color-primary;
				}
			}
		}

		.goods-container {
			.goods-item {
				padding: 25rpx 24rpx;
				.goods-info {
					min-width: 500rpx;
				}
			}
		}
	}

	.return-address-contain {
		padding: 20rpx 24rpx 28rpx 30rpx;
		border-bottom: $-solid-border;

		.address {
			flex: 1;
			line-height: 50rpx;
		}

		.address-title {
			// width: 160rpx;
			// align-self: flex-start;
			line-height: 40rpx;
		}

		.copy-btn {
			background-color: #F4F4F4;
			color: #555555;
			padding: 3rpx 16rpx;
			margin-left: 12rpx;
			border-radius: 4rpx;
		}
	}

	.tips-dialog {
		height: 230rpx;
		width: 100%;
	}
</style>
